<template>
  <section class="sidebar">
    <logo
      v-if="layout === 'side'"
      :is-collapse="isCollapse"
    />
    <el-scrollbar :wrap-class="['scrollbar-wrapper', layout === 'mix' ? 'mix' : '']">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :unique-opened="true"
        :collapse-transition="true"
        :mode="layout === 'top' ? 'horizontal' : 'vertical'"
      >
        <sidebar-item
          v-for="raw in permissionRoutes"
          :key="raw.path"
          :item="raw"
          :base-path="raw.path"
          :is-collapse="isCollapse"
        />
      </el-menu>
    </el-scrollbar>
  </section>
</template>
<script lang="ts" setup name="sidebar">
import {
  ref, watch, computed,
} from 'vue';

import { useRoute, useRouter } from 'vue-router';

import Logo from '../logo/index.vue';

import SidebarItem from './sidebar-item.vue';

import config from '@/config';
import { useAppStore } from '@/store/app';
import { usePermissionStore } from '@/store/permission';

defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
});

const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const permissionStore = usePermissionStore();

// 激活菜单的 index, index取的是路由中path的值
const activeMenu = ref();

const layout = computed(() => appStore.layout);
const permissionStoreRoutes = computed(() => permissionStore.permissionRoutes);

watch(
  route,
  (val) => {
    activeMenu.value = val?.meta?.activeMenu || val.path;
  },
  {
    immediate: true,
  }
);

const routes = config.sso ? permissionStoreRoutes.value : router.options.routes;
const permissionRoutes = ref(routes);
</script>

<style lang="scss" scoped>
  .sidebar {
    width: 100%;
    height: 100%;
    overflow-y: hidden;

    :deep(.scrollbar-wrapper) {
      height: calc(100% - #{var(--maia-nav-header-height)}) !important;
      overflow-x: hidden;

      &.mix {
        height: 100% !important;
      }
    }

    :deep(.is-horizontal) {
      display: none;
    }

    // 修改 collapse 时的默认样式
    :deep(.#{$namespace}-menu--collapse) {
      .#{$namespace}-sub-menu__icon-arrow {
        display: none !important;
        opacity: 0 !important;
      }
    }

    // 修改menu和menu-item的默认样式
    :deep(.#{$namespace}-menu) {
      border-right-width: 0;

      .#{$namespace}-menu-item {
        display: flex;
        align-items: center;
      }
    }
  }
</style>
